<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				margin:4px;
				font-family: helvetica;
				
			}
			
			.masonry{
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				height: 1000px;
				
			}
			
			.item{
				position: relative;
				width: 25%;
				padding: 2px;
				box-sizing: border-box;
				counter-increment: item-counter;
			}
			
			.item img{
				display: block;
				width: 100%;
				height: auto;
			}
			
			
			.item:after{
				position: absolute;
				display: block;
				top:2px;
				left: 2px;
				width: 24px;
				height: 24px;
				text-align: center;
				line-height: 24px;
				background-color: #000;
				color: #fff;
				content:counter(item-counter);
			}
			/* 设置相应排序顺序 */
			.item:nth-child(4n+1)
			{
				order: 1;
			}
			
			.item:nth-child(4n+2)
			{
				order: 2;
			}
			.item:nth-child(4n+3)
			{
				order: 3;
			}
			.item:nth-child(4n)
			{
				order: 4;
			}
		</style>
	</head>
	<body>
		<div class="masonry">
			<div class="item">
				<!-- 生成随机图片 -->
				<img src="https://picsum.photos/360/460?random=1" >
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/460?random=2" >
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/460?random=3" >
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/460?random=4" >
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/460?random=5" >
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/460?random=6" >
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/460?random=7" >
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/460?random=8" >
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/460?random=9" >
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/460?random=10" >
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/460?random=11" >
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/460?random=12" >
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/460?random=13" >
			</div>
			<div class="item">
				<img src="https://picsum.photos/360/460?random=14" >
			</div>
		</div>
	</body>
</html>
